﻿<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MooTools Demos - Effects</title>
	<link type="text/css" rel="Stylesheet" href="effects.css" />
</head>
<body>

<div id="element">MooTools</div>

<div id="actions">

	<h2>Simple Fx</h2>
	<ul class="simple-fx">
		<li data-property="opacity" data-value="0">Fade opacity to 0</li>
		<li data-property="opacity" data-value="0.3">Fade opacity to 0.3</li>
		<li data-property="opacity" data-value="1">Fade opacity to 1</li>

		<li data-property="height" data-value="30">Animate height to 30px</li>
		<li data-property="height" data-value="100">Animate height to 100px</li>

		<li data-property="background-color" data-value="#78BA91">Animate background color</li>

		<li data-property="border-width" data-value="10px">Animate border</li>
	</ul>

	<h2>More Fx</h2>
	<ul class="more-fx">
		<li id="morph-1">First example!</li>
		<li id="morph-2">Second example!</li>
		<li id="morph-3">Morph to a CSS rule!</li>
	</ul>

	<p id="reset">Reset</p>

</div>

	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/';</script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/moo/effects/effects.js"></script>
</body>
</html>
